<template>
  <div class="layer p-3 gap-3">

    <div class="section">
      <div class="btn-primary" @click="goto('../reservation/new')">新预约</div>
    </div>
    <div class="section">
      <div class="btn-primary" @click="goto('../package/selectType')">新增套餐</div>
    </div>

    <div class="section  gap-0">

      <div class="form-item-inline" @click="showMore = !showMore">
        <div class="title-flag"></div>
        <div class="grow title">登陆信息</div>
        <div :class="showMore ? 'arrow-up' : 'arrow-down'"></div>
      </div>

      <xoVerticalExpand :class="showMore ? 'mt-3' : ''" :expand="showMore">
        <div class="form-item gap-3">
          <div>账号</div>
          <div class="input-box" :class="rule[0].errMsg ? 'b-red-500' : ''">
            <input type="text" name="username" placeholder="">
          </div>
          <div v-if="rule[0].errMsg" class="text-xs text-red-500">{{ rule[0].errMsg }}</div>
        </div>
        <div class="form-item gap-1 ">
          <div>密码</div>
          <div class="input-box" :class="rule[1].errMsg ? 'b-red-500' : ''">
            <input type="password" name="password" placeholder="">
          </div>
          <div v-if="rule[1].errMsg" class="text-xs text-red-500">{{ rule[1].errMsg }}</div>
        </div>
      </xoVerticalExpand>
    </div>

  </div>
</template>

<script setup lang='ts'>

import { goto } from '@/utils';
import { ref } from 'vue';
import xoVerticalExpand from '@/components/xoUI/xoVerticalExpand.vue';


const accountModel = ref({
  account: '',
  password: '',
})

const showMore = ref(false)

const rule = ref([
  { name: 'account', errMsg: '' },
  { name: 'password', errMsg: '' }
])

</script>

<style></style>